<template>
  <AutoComplete ref="auto"
                v-model="selectValue"
                @on-search="searchMethod"
                icon="ios-search"
                clearable
                style="width:300px">

    <Row>
      <i-col span="8" style="border-right: #8D8D8D 1px solid;height: 250px;overflow: auto">
        {{ filterVal | json }}
        <CheckboxGroup v-model="filterVal" type="button">
          <template v-for="item in groupData">
            <Checkbox :label="item[groupField]" :true-value="item[groupField]">{{ item[groupLabel] }}</Checkbox>
          </template>
        </CheckboxGroup>
      </i-col>

      <i-col span="16">
        <div v-for="item in rebuildData">
          <Option :value="item[field]">
            <span>{{ item[label] }}</span>
          </Option>
        </div>
      </i-col>
    </Row>

  </AutoComplete>
</template>

<script>
  import { searchArr } from './searchHelper'

  export default {
    name: 'index',
    data () {
      let rebuildData = []
      let filterVal = []
      let datas = { rebuildData, filterVal }
      return datas
    },
    props: {
      data: {
        type: Array,
        default () {
          return [
            {
              title: 'iView',
              count: 10000
            },
            {
              title: 'iView UI',
              count: 10600
            }
          ]
        }
      },
      groupData: {
        type: Array,
        default () {
          return []
        }
      },
      groupField: {
        type: String,
        default: '300'
      },
      groupLabel: {
        type: String,
        default: '300'
      },
      width: {
        type: String,
        default: '300'
      },
      height: {
        type: String,
        default: '300'
      },
      field: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      searchKeys: {
        type: String,
        default: ''
      },
      filterKey: {
        type: String,
        default: ''
      }
      // filterVal: {
      //   type: String,
      //   default: ''
      // }
    },
    computed: {
      selectValue: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('on-change', val)
          this.$emit('input', val)
        }
      }
    },
    watch: {
      filterVal () {
        this.searchMethod()
      },
      selectValue (val) {
        if (!val) {
          this.searchMethod()
        }
      }
    },
    methods: {
      searchMethod (value) {
        console.log('this.value', this.$refs['auto'])
        this.rebuildData = searchArr(value, this.data, this.searchKeys, this.filterKey, this.filterVal)
      }
    },
    mounted () {
      this.rebuildData = JSON.parse(JSON.stringify(this.data))
    }
  }
</script>

<style scoped>

</style>
